<template>
    <view class="page-content rel community">
	  <navbar @clickLeft="toBack" fixed leftIcon="left" title="CHB社区" shadow></navbar>
		
      <view class="p-t-30 p-b-40">
		<!--<view @click="choseWallet" class="view flex-row align-center justify-between w104 h30 m-r-10 m-b-15 m-l-20" style="background:#6781FF;border-radius: 15px;">
                <view class="fz-12 c-fff p-l-10 ">{{Object.keys(defaultWallet).length > 0 ? defaultWallet.name : '未创建钱包'}}</view>
                <view class="w20 h20 bg-fff view align-center justify-center m-r-5" style="border-radius:50%;">
                    <uni-icons type="right" size="12" color="#748FAC"/>
                </view>
        </view>-->
		<!-- 2为CHB矿池 -->
		<view class="p-l-20 p-r-20 ">
			<computing :basicid="2" ref="computing"/>
		</view>	
        <view >
          <view class="m-l-17 m-r-17 view flex-row align-center justify-between m-b-14">
            <view  class="fz-16 c_748 p-l-13">CHB社区</view>
            <view v-if="is_join == 0" @click="openCommunity" class="w102 h42 view align-center justify-center fz-16 c_fff bor-rad19 bg_678">创建社区</view>
          </view>

          <view class="p-b-30 p-l-17 p-r-17" style="overflow-y:auto;height:calc(100vh - 840rpx);">
            <view v-for="(item,index) in communityList" class="view flex-row" :key="index">
                <view class="m-r-18 w40 h40 m-t-20">
					<view class="rank">{{index+1}}</view>
                  <!--<image src="/static/img1/Community_icon_first_default.png" class="width100 height100"/>-->
                </view>
                <view class="view flex-row justify-between flex-1 p-b-10 p-t-17 p-r-1" style="border-bottom: 1px solid #D1D4E8;">
                  <view>
                    <view class="fz-16 c_071 m-b-1">{{item.name}}</view>
                    <view class="c_969 fz-14">社区贡献值：{{item.total_calculate}}</view>
					<view class="c_969 fz-14">社区总销毁：{{item.total_token}}</view>
                  </view>
				  <view v-if="is_join == 0" class="w80 h34 view align-center justify-center c_fff bor-rad19 bg_678 m-t-4" style="line-height: 1;"
				    :class="(item.is_join != 1 && is_join == 1) ? 'disable': ''" @click="joinCommuity(item.id,false)">加入</view>
                  <view v-else class="w80 h34 view align-center justify-center c_fff bor-rad19 bg_678 m-t-4" style="line-height: 1;" 
				  :class="(item.is_join != 1 && is_join == 1) ? 'disable': ''" @click="joinCommuity(item.id,true)">加入</view>
                </view>
            </view>
          </view>

        </view>
      </view>
      <!--<view class="history-botton h70 c_fff width100 bg_fff p-l-17 p-r-17 view flex-row align-center border-box fz-15">
        <view @click="notOpen" class="h42 flex-1 bor-rad13 bg_678 view align-center justify-center">我的矿池</view>
        <view @click="viewLog" class="h42 flex-1 bor-rad13 bg_678 view align-center justify-center m-l-16">查看记录</view>
      </view>-->
	  <confirmWallet ref="walletComp" :openType="3" :params="params" @confirm="confirmCreate"/>
      <uni-popup ref="popup" type="dialog">
        <uni-popup-dialog mode="input" placeholder="请输入社区名称"  title="社区名称" :duration="2000" :before-close="true" @close="closeCreate" @confirm="createPay"></uni-popup-dialog>
      </uni-popup>
    </view>
</template>

<script>
import { mapState } from "vuex";
import navbar from '@/components/uni-nav-bar'
import { createCommunity, getCommunityData, joinCommunity } from '@/apis/community'
import {getPoolList} from '@/apis/pool'
import uniPopup from '@/components/uni-popup/uni-popup'
import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog'
import confirmWallet from '@/components/confirmWallet/index.vue'
import {getTokenBalance} from "@/apis/bsc20.js";

import computing from '@/components/computing/index'
export default {
  components: {
	  navbar,
    uniPopup,
    uniPopupDialog,
	computing,
	confirmWallet
  },
  data() {
    return {
      poolList: [],
      current: 0,
      indicatorDots: true,
      autoplay: true,
      is_join: 1,
      interval: 2000,
      duration: 500,
	  balance: 0,
      communityList: [],
	  params:{},
	  name:"",
      list: [
        {
          src: "https://hainanshenlong.oss-cn-hangzhou.aliyuncs.com/banner/shequ-1.jpg",
        },
        {
          src: "https://hainanshenlong.oss-cn-hangzhou.aliyuncs.com/banner/shequ-2.jpg",
        },
        {
          src: "https://hainanshenlong.oss-cn-hangzhou.aliyuncs.com/banner/shequ-3.jpg",
        },
      ],
    };
  },
  onShow() {
    
    this.fetchData()
    
  },
  onLoad() {
    this.runInAddress()
    this.getRollList()
  },
  computed: {
    ...mapState(["defaultWallet"]),
  },
  methods: {
    // 获取矿池列表
    async getRollList() {
        let res = await getPoolList()
        this.poolList = res.data
		
		let balance = await getTokenBalance(this.defaultWallet.address, 'CHB')
		if(balance.data.amount){
			this.balance = balance.data.amount
		}
    },
    async runInAddress() {
        const isNftUser = uni.getStorageSync('isNftUser');
        if (isNftUser != 1) {
            const res = await registerNFTAddress()
            if (res.code == 0) {
                uni.setStorageSync('isNftUser',1);
            }
        }
    },
    // 查看记录
    /*viewLog() {
      uni.navigateTo({
        url: '/pages/my/profitsRecord/index'
      })
    },*/
	toBack(){
		uni.reLaunch({
		  url: '/pages/dig/orePool/index'
		})
	},
    // 加入社区
    joinCommuity(community_id,withOutConfirm=false) {
		if(!withOutConfirm){
		  uni.showModal({
			  title: '提示信息',
			  content: '是否加入该社区？',
			  cancelText: "取消",
			  confirmText: "确认加入",
			  confirmColor: '#F2C827',
			  cancelColor: '#9E9E9E',
			  success: async (res)  => {
				if (res.confirm) {
				  const res = await joinCommunity({community_id})
				  if (res.code == 0) {
					uni.showToast({
					  title: res.message,
					  success: () => {
						const item = this.poolList.find( item => item.symbol == 'chb')
						//symbol = dsx;
						uni.navigateTo({
						   url: `/pages/dig/orePool/mining?id=${item.id}&symbol=dsx&min_num=${item.min_num}&min_nft=${item.min_nft}`
						});
					  }
					})
				  }
				}
			  }
			});
		}else{
			const item = this.poolList.find( item => item.symbol == 'chb')
			//symbol = dsx;
			uni.navigateTo({
			   url: `/pages/dig/orePool/mining?id=${item.id}&symbol=dsx&min_num=${item.min_num}&min_nft=${item.min_nft}`
			});
		}
    },
    // 创建社区弹窗
    openCommunity() {
		if(this.is_join == 1){
			this.$showToast("您已加入或创建社区");
			return
		}
        this.$refs.popup.open()
    },
	createPay(name){
		this.$refs.walletComp.onShowDialog()
		this.params = {
			pay_amount:100,
			token:'CHB',
			name: name,
			balance: this.balance
		}
		this.closeCreate();
	},
    async fetchData() {
      const res = await getCommunityData()
      this.is_join = res.data.is_join
      this.communityList = res.data.list
    },
    closeCreate() {
      this.$refs.popup.close()
    },
    // 创建社区
    async confirmCreate() {
		console.log('back param',this.params)
        const res = await createCommunity(this.params)
        uni.showToast({title: res.message})
        if (res.code == 0) {
            this.fetchData()
            this.$refs.popup.onClose()
        }
    },
    notOpen() {
      this.$showToast("该功能将于3月9日开放");
    },
    choseWallet() {
      uni.navigateTo({
        url: "/pages/wallet/walletManager/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f6f6f6;
  box-sizing: border-box;
  height: 100%;
}
.page-content {
  height: 100%;
  ::v-deep {
    .uni-swiper-dots-horizontal {
      bottom: 15px;
      .uni-swiper-dot {
        width: 4px;
        height: 4px;
        border-radius: 4px;
        transition: width 0.3s;
        background-color: #d8d8d8;
        &-active {
          width: 15px;
          background-color: #6781ff;
        }
      }
    }
  }
}
.community .swiper-box {
  height: 210px;
}
.community .history-botton {
  position: fixed;
  left: 0;
  bottom: 50px;
}
.disable {
  background: #ccc;
  color: #000;
  pointer-events: none !important;
}
.c_969{
	color: #969696;
}
.rank{
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: space-around;
}
</style>
